import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
import { TreeSelectComponent, lvFlattenTreeData } from '@iux/live';
import { every as _every, filter as _filter, forEach as _forEach } from 'lodash';

@Component({
  selector: 'app-search-check-all',
  templateUrl: './search-check-all.component.html',
  styles: [
    `
      .ui-tree-select-container {
        width: 368px;
      }

      .check-all-demo-btn-container {
        margin-bottom: 4px;
        padding: 0 8px;
      }

      ::ng-deep .check-all-demo .lv-treeselect-panel-header {
        display: flex;
        flex-direction: column-reverse;
      }

      ::ng-deep .check-all-demo .lv-option {
        padding-left: 32px;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchCheckAllComponent implements OnInit {
  @ViewChild(TreeSelectComponent, { static: false }) lvTreeSelect: TreeSelectComponent;
  treeData;
  selection = [];
  treeKeepExpanded = true;
  isFilterFinished = false;

  /**
   * 全选
   * 不为disable的项全部选中
   * disabled可不被选中
   * 不能全部为disabled
   */
  get isAllCheck() {
    const visibleData = this.treeData;

    if (!visibleData?.length) {
      return false;
    }

    const disItems = _every(visibleData, 'disabled');
    if (disItems) {
      return false;
    }

    const items = _filter(visibleData, item => !item.disabled);

    const cacheData = lvFlattenTreeData(items, true).map(item => item.data);

    return cacheData.length === this.selection.length;
  }

  // 半选
  get isHalfCheck() {
    return !this.isAllCheck && !!this.selection.length;
  }

  constructor() {}

  ngOnInit() {
    // 树
    this.treeData = [
      {
        label: 'Documents-disabled', // 默认内容icon
        value: '1',
        children: [
          {
            label: 'Expenses.doc',
            value: '1-1',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            value: '1-2',
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Word', // 自定义内容icon
        value: '2',
        contentToggleIcon: {
          true: 'icon-light-mode',
          false: 'icon-dark-mode',
        },
        children: [
          {
            label: 'Expenses.doc',
            value: '2-1',
            contentToggleIcon: 'icon-storage',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            value: '2-2',
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Pictures', // 不显示内容icon
        value: '3',
        contentToggleIcon: '',
        children: [
          {
            label: 'logo.png',
            value: '3-1',
            icon: 'icon-task',
            isLeaf: true,
          },
          {
            label: 'banner.pnd',
            value: '3-2',
            icon: 'icon-task',
            isLeaf: true,
          },
        ],
      },
    ];
  }

  searchChange(event) {
    this.isFilterFinished = !event;
    if (!this.treeKeepExpanded) {
      this.treeData = [...this.treeData];
    }
    this.treeKeepExpanded = true;
  }

  toggleCheckAll() {
    const visibleData = _filter(this.treeData, item => !item.hidden);
    if (this.isAllCheck) {
      const flatData = lvFlattenTreeData(visibleData, true).map(item => item.data);
      const setData = new Set();
      this.selection.forEach(item => {
        setData.add(item);
      });
      flatData.forEach(item => {
        if (setData.has(item)) {
          setData.delete(item);
        }
      });
      const cacheSelection = [];
      setData.forEach(value => {
        cacheSelection.push(value);
      });

      this.selection = cacheSelection;
    } else {
      this.selection = lvFlattenTreeData(visibleData, true).map(item => item.data);
    }
    this.lvTreeSelect.updateOverlayPosition();
  }

  expandAll() {
    this.toggle(this.treeData, true);
    this.treeData = [...this.treeData];
  }

  collapseAll() {
    this.toggle(this.treeData, false);

    this.treeData = [...this.treeData];
    this.treeKeepExpanded = !this.isFilterFinished;
  }

  toggle(nodes, status) {
    _forEach(nodes, item => {
      item.expanded = status;
      this.toggle(item.children, status);
    });
  }
}
